import React, { Component, useEffect } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TextGeometry } from "three/addons/geometries/TextGeometry.js";
import { FontLoader } from "three/addons/loaders/FontLoader.js";
import * as font from "three/examples/fonts/helvetiker_bold.typeface.json";
function ThreeMap() {
  useEffect(() => {
    iniThree();
  }, []);

  console.log(111, font, typeof font);

  const iniThree = () => {
    const scene = new THREE.Scene(); //创建场景
    const camera = new THREE.PerspectiveCamera(
      35,
      window.innerWidth / window.innerHeight,
      1,
      1000
    ); //创建相机
    // camera.position.z = 10;  //设置相机坐标
    camera.position.set(20, 2, 100);
    const container = document.getElementById("container");
    const renderer = new THREE.WebGLRenderer(); //生成渲染实例
    renderer.setSize(window.innerWidth / 2, window.innerHeight / 2, false); //设置宽高
    renderer.setClearColor("#af3", 0.5); //背景颜色
    container.appendChild(renderer.domElement); //生成的渲染的实例, 这个要放到对应的dom容器里面

    const axisHelper = new THREE.AxesHelper(12);
    scene.add(axisHelper); //插入辅助线长度为2的坐标系

    //长方体
    const geometry = new THREE.BoxGeometry(2, 4, 6); //长宽高
    const material = new THREE.MeshLambertMaterial({
      color: 0x156289,
      //   emissive: 0x072534,
    }); //材质
    const cube = new THREE.Mesh(geometry, material); //生成网格，网格上含有位置信息、旋转信息、缩放信息等等, 需要用几何体与材质两个参数, 但其实并不像网上说的必须要有材质, 不传材质也能显示。
    scene.add(cube);

    // line
    const points = [];
    points.push(new THREE.Vector3(-10, 0, 0));
    points.push(new THREE.Vector3(0, 10, 0));
    points.push(new THREE.Vector3(10, 0, 0));

    const geometry2 = new THREE.BufferGeometry().setFromPoints(points);
    const line = new THREE.Line(geometry2, material);

    scene.add(line);

    // text
    const str = "hello world";
    const parameters = {
      //   font: font,
      size: 80,
      height: 5,
      curveSegments: 12,
      bevelEnabled: true,
      bevelThickness: 10,
      bevelSize: 8,
      bevelOffset: 0,
      bevelSegments: 5,
    };
    const text = new TextGeometry(str, parameters);

    const loader = new FontLoader();
    const font = loader.load(
      // resource URL
      "three/examplesfonts/helvetiker_bold.typeface.json",

      // onLoad callback
      function (font) {
        // do something with the font
        console.log(font);
      },

      // onProgress callback
      function (xhr) {
        console.log(xhr.loaded, xhr.total, xhr);
        
        console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
      },

      // onError callback
      function (err) {
        console.log("An error happened");
      }
    );

    console.log( FontLoader);
    

    scene.add(text);

    const orbitControls = new OrbitControls(camera, container);
    // orbitControls.autoRotate = true;
    // orbitControls.target = new THREE.Vector3(0, 0, 0);//控制焦点

    //添加光源
    //自然光
    // const light = new THREE.AmbientLight('blue');
    // scene.add(light)

    //点光源：1、intensity光强。2、distance光源照射的距离, 默认值为0也就是无限。3、visible布尔值, 是否打开光源。4、decay衰减值, 越大衰减速度越快。
    const point_light = new THREE.PointLight("white", 1, 100000);
    point_light.position.set(5, 5, 5);
    scene.add(point_light);

    const animate = function () {
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      //   cube.rotation.z += 0.01;
      requestAnimationFrame(animate);
      // orbitControls.update()
      renderer.render(scene, camera);
    };
    animate();
    // renderer.render(scene, camera);
  };
  return <div id="container"></div>;
}
export default ThreeMap;
